<template>
  <div class="search-container">
    <div class="search-box">
      <div class="submit-box">
        <input type="text" placeholder="可输入关键字" class="search-input" v-model="keywords">
        <button class="bottom-submit"></button>
      </div>
    </div>
    <search-com @updateType="saveType" @updateFilter="saveFilter"></search-com>
    <!--搜索区域默认显示-->
    <div class="no-listinfo" v-if="baseShow">
      <p class="search-defaultnone"></p>
      <p class="search-tip">请在搜索框输入关键词汇进行全站检索</p>
    </div>
    <!--搜索加载过渡-->
    <div class="spinner-wrap flex" v-if="loadStatus && infoData.length === 0">
      <search-loading></search-loading>
    </div>
    <!--搜索不到-->
    <div class="no-searchinfo" v-if="otherWord && boxShow">
      <p class="no-search-default"></p>
      <p class="no-search-tip">抱歉没有搜索到<strong style="color:#fb5548">{{ '“' + keywords + '”' }}</strong>请重新搜索</p>
    </div>
    <!--搜索列表-->
    <ul class="ulbox" v-if="boxShow">
      <li  v-if="searchType === 'post'">
        <search-news :item="items" v-for="(items,index) in infoData" :key="index"></search-news>
      </li>
      <li class="report"  v-if="searchType === 'report' || searchType === 'activity'">
        <search-report :item="items" v-for="(items,index) in infoData" :key="index"></search-report>
      </li>
      <li v-if="searchType === 'project'" >
        <search-project :item="items" v-for="(items,index) in infoData"  :key="index"></search-project>
      </li>
    </ul>
    <div class="showbox" v-if="boxShow">
      <button class="loadMore" v-if="infoData.length > 0 && !more" @click="loadMore">加载更多</button>
      <div class="more flex" v-if="more && !noInfor"><img src="../../assets/svg/load-mord.svg" alt=""></div>
      <div class="noinfor" v-if="noInfor">没有更多信息了</div>
    </div>
    <div class="right-fixed-top">
      <feed-back></feed-back>
    </div>
    <div class="right-fixed" v-show="topStatus" @click="gotop">
      <to-top></to-top>
    </div>
  </div>
</template>

<script>
  import searchCom from '../../components/search/search-com'
  import searchNews from '../../components/search/searchNews'
  import searchReport from '../../components/search/searchReport'
  import searchProject from '../../components/search/searchProject'
  import searchLoading from '../../components/search/scale'
  import request from '../../../api/request'
  import toTop from '../../components/backToTop'
  import backToTop from '../../mixins/backToTop'     // mixins 混入回到顶部方法
  import feedBack from '../../components/feedBack'

  export default {
    name: 'search',
    mixins: [backToTop],
    data () {
      return {
        searchFilter: '',         // 选择的时间段 默认时间 不限  提交字段为空
        searchType: 'post',       // 数据type型   默认获取新闻信息
        infoData: [],
        loadStatus: false,
        baseShow: true,
        page: 1,
        pageSize: 20,
        more: false,
        isBackShow: false,
        topStatus: false,
        noInfor: false,
        otherWord: false,
        boxShow: true         // 控制输入框删除太快还会显示其他数据
      }
    },
    computed: {
      keywords: {
        get () {                 // 得到vuex更新后的keywords
          return this.$store.state.user.searchKeyWord
        },
        set (val) {              // 提交keywords到vuex
          this.$store.commit('user/setKeyWord', val)
        }
      }
    },
    components: {
      searchCom,     // 点击的选项组件
      searchNews,     // 对应的新闻列表组件
      searchReport,    // 对应的报告列表组件
      searchProject,     // 对应的项目列表组件
      searchLoading,      // 搜索加载过渡组件
      toTop,
      feedBack
    },
    watch: {
      searchFilter () {
        if (this.keywords === '') {
          this.baseShow = true
        } else {
          this.getInfo()
        }
      },
      searchType () {
        if (this.keywords === '') {
          this.baseShow = true
        } else {
          this.getInfo()
        }
      },
      keywords (val) {
        if (val) {  // 监听关键字变化搜索
          this.getInfo()
          this.boxShow = true
        } else {
          this.infoData = []        // 如果关键字为空，数组置为为空
          this.loadStatus = false
          this.baseShow = true
          this.noInfor = false
          this.more = false
          this.otherWord = false
          this.boxShow = false
        }
      }
    },
    methods: {
      saveType (data) {            // 子组件$emit冒上来的搜索类型'post''report''project''activity'
        this.searchType = data
        this.more = false        // 每次筛选恢复加载更多默认状态
        this.noInfor = false      // 每次筛选恢复加载更多默认状态
      },
      saveFilter (data) {
        this.searchFilter = data   // 子组件$emit冒上来的过滤类型
        this.more = false          // 每次筛选恢复加载更多默认状态
        this.noInfor = false        // 每次筛选恢复加载更多默认状态
      },
      getInfo () {                 // 请求搜索信息
        this.baseShow = false
        this.infoData = []
        request.get('search', {
          keywords: this.keywords,
          search_for: this.searchType,
          filter: this.searchFilter,
          page: 1,
          pageSize: this.pageSize
        }).then((response) => {
          if (response.data.code === '200') {
            if (response.data.data.result.items.length === 0) {
              this.otherWord = true
              this.loadStatus = false
            } else {
              this.otherWord = false
              this.loadStatus = true
              this.infoData = response.data.data.result.items
            }
          }
        }).catch((error) => {
          throw new Error('fetch falsh news error: ' + error)
        })
      },
      loadMore () {                        // 加载更多
        this.more = true
        request.get('search', {
          keywords: this.keywords,
          search_for: this.searchType,
          filter: this.searchFilter,
          page: ++this.page,
          pageSize: this.pageSize
        }).then((response) => {
          if (response.data.code === '200') {
            if (response.data.data.result.items.length === 0) {
              this.noInfor = true
            } else {
              this.more = false
              this.infoData = this.infoData.concat(response.data.data.result.items)
            }
          }
        })
      },
      gotop () {
        this.backToTop()                 // 回到顶部
      }
    },
    created () {
      if (this.keywords === '') {        // 如果keywords为空默认显示
        this.baseShow = true
      } else {
        this.getInfo()
      }
    },
    mounted () {
      window.addEventListener('scroll', () => {
        window.scrollY > 300 ? (this.topStatus = true) : (this.topStatus = false)
      })
    }
  }
</script>
<style lang="scss">
  .search-container {
    width: 1162px;
    margin: 0 auto;
    min-height: 864px;
    background-color: #fff;
    overflow: hidden;
    .search-box {
      width: 648px;
      margin: 0 auto;
      box-sizing: border-box;
      .submit-box {
        width: 645px;
        height: 40px;
        border: 1px solid #00ba91;
        background: #fff;
        position: relative;
        margin-top: 40px;
        margin-bottom: 31px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .search-input {
          width: 590px;
          height: 18px;
          font: 16px arial;
          border: none;
          outline: none;
          padding-left: 12px;
        }
        .bottom-submit {
          width: 20px;
          height: 20px;
          background: url("../../assets/svg/search.svg") no-repeat;
          position: absolute;
          top: 9px;
          right: 10px;
          cursor: pointer;
          border: none;
        }
      }
    }
    .no-listinfo {
      padding-top: 107px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .search-defaultnone {
        width: 102px;
        height: 102px;
        background: url("../../assets/svg/search_defaultnone.svg") no-repeat center center;
      }
      .search-tip {
        padding-top: 14px;
        font-size: 14px;
        color: #aaaaaa;
      }
    }
    .no-searchinfo {
      padding-top: 107px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .no-search-default {
        width: 102px;
        height: 102px;
        background: url("../../assets/svg/search_wuxinxi.svg") no-repeat center center;
      }
      .no-search-tip {
        padding-top: 14px;
        font-size: 14px;
        color: #aaaaaa;
      }
    }
    .spinner-wrap {
      align-items: center;
      justify-content: center;
      height: 400px;
      margin: 0 auto;
    }
    .ulbox {
      margin-top: 30px;
      .report {
        width: 648px;
        display: flex;
        flex-flow: wrap;
        margin: 0 auto;
      }
    }
    .showbox {
      margin: 0 auto;
      .noinfor {
        text-align: center;
        font-size: 14px;
      }
      height: 50px;
      .more {
        img {
          margin: 0 auto;
          width: 35px;
          height: 35px;
        }
      }
      .loadMore {
        display: block;
        border: 1px solid #606873;
        border-radius: 4px;
        width: 128px;
        height: 26px;
        cursor: pointer;
        margin: 0 auto;
        background: white;
      }
      .nomsg {
        text-align: center;
        font-size: 12px;
        color: #606873;
      }
    }
    .right-fixed {
      position: fixed;
      right: 10px;
      bottom: 60px;
    }
    .right-fixed-top{
      position: fixed;
      right: 10px;
      bottom: 139px;
    }
  }
</style>
